<!-- 仓库报表 - 库存库龄查询(原料仓) -->
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :defaults.sync="defaults"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      :before-close="beforeClose"
      v-model="form"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuRight">
        <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>
      </template>
      <template slot="menuLeft">
        <el-button type="warning" size="small" icon="el-icon-download" @click="$refs.exportComp.visible = true" v-if="permission.lineSideWarehouseInventory_export"
          >导出</el-button
        >
      </template>
      <template slot="infoForm">
        <avue-crud ref="infoCrud" class="infoCrud" :option="infoOption" :data="infoData" @row-del="rowDel" v-model="infoForm" @selection-change="infoSelectionChange">
          <template slot="menuLeft">
            <div style="width: 100%" type="text" size="small" icon="el-icon-print">
              <div class="btn-content">
                <div>
                  <span>物料编码:</span><span>{{ form.partNo }}</span>
                </div>
                <div>
                  <span>物料名称:</span><span>{{ form.partMasterName }}</span>
                </div>
                <div>
                  <span>物料型号:</span><span>{{ form.partModel }}</span>
                </div>
                <div style="margin-right: 40px">
                  <span>供应商:</span><span>{{ form.vendorName }}</span>
                </div>
              </div>
            </div>
          </template>
        </avue-crud>
      </template>
    </avue-crud>
    <export-comp ref="exportComp" page-api-url="mes-abacus/material-warehouse-storage/raw-material/page" :option="option" :page="page" :query="query" file-name="库存数量查询">
    </export-comp>
    <el-dialog title="查询进度" :visible.sync="dialogVisible" width="30%" append-to-body>
      <el-progress :percentage="currentProgress" stroke-width="40" stroke-linecap="square" :show-text="false"> </el-progress>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getListTo, getDetailTO } from '@/api/warehouse/inventory-quantity-lineEdge';
import { mapGetters } from 'vuex';
import exportComp from '@/components/export-comp';
import userTableConfig from '@/components/user-table-config/index.vue';
export default {
  components: {
    exportComp,
    userTableConfig
  },
  data() {
    return {
      pageCode: 'inventoryQuantityProduct',
      visible: false,
      dialogVisible: false,
      currentProgress: 0,
      form: {},
      data: [],
      defaults: {},
      query: {},
      intervalId: null,
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      timer: new Date().getTime(),
      selectionList: [],
      option: {
        height: 'calc(100vh - 440px)',
        tip: false,
        searchShow: true,
        // searchSpan: 5,
        // searchMenuSpan: 4,
        searchMenuPosition: 'right',
        labelWidth: 110,
        // dialogCustomClass: 'custom-class',
        border: true,
        index: true,
        indexLabel: '序号',
        addBtn: false,
        viewBtn: true,
        viewBtnText: '详情',
        viewTitle: '详情',
        editBtn: false,
        delBtn: false,
        refreshBtn: true,
        excelBtn: false,
        selection: true,
        // dialogDrag: false, // 开启拖拽功能
        dialogClickModal: false,
        columnBtn: false,
        showSummary: false,
        // sumColumnList: [
        //   {
        //     label: '合计:',
        //     name: 'sumQuantity',
        //     type: 'sum',
        //     decimals: 1
        //   }
        // ],
        column: [
          {
            label: '物料编码',
            prop: 'partNo',

            search: true,
            viewDisplay: false
          },
          {
            label: '物料名称',
            prop: 'partMasterName',
            viewDisplay: false
          },
          {
            label: '物料型号',
            prop: 'partModel',
            search: true,
            viewDisplay: false
          },
          {
            label: '物料类别',
            prop: 'partCategoryId',
            searchOrder: 1,
            type: 'tree',
            dicUrl: '/api/mes-admin/part-category/tree',
            props: {
              label: 'title',
              value: 'id'
            },
            search: true,
            viewDisplay: false
          },
          {
            label: '供应商',
            prop: 'vendorName',
            search: true,
            viewDisplay: false
          },
          {
            label: '仓库名称',
            prop: 'warehouseName',
            viewDisplay: false
          },
          {
            label: '储位编码',
            prop: 'areaCode',
            viewDisplay: false
          },
          {
            label: '数量',
            prop: 'quantity',
            viewDisplay: false
          },
          {
            label: '包装数',
            prop: 'packs',
            viewDisplay: false
          },
          {
            label: '最长在库时间（天）',
            prop: 'putawayDate',
            viewDisplay: false
          }
        ],
        group: [
          {
            label: '',
            prop: 'wipInfo',
            arrow: false,
            addDisplay: false,
            editDisplay: false,
            column: [
              {
                labelWidth: 0,
                label: '',
                prop: 'info',
                span: 24,
                hide: true,
                formslot: true
              }
            ]
          }
        ]
      },
      infoForm: {},
      infoSelectionList: [], // 发货产品信息勾选数据
      infoOption: {
        selection: true,
        editBtn: false,
        height: 270,
        border: true,
        menuWidth: 100,
        addBtn: false,
        delBtn: true,
        menu: false,
        index: true,
        indexLabel: '序号',
        columnBtn: false,
        refreshBtn: false,
        tip: false,
        column: [
          {
            label: '物料批次',
            prop: 'lotNo'
          },
          {
            label: '包装数',
            prop: 'packs'
          },
          {
            label: '数量',
            prop: 'quantity'
          },
          {
            label: '状态',
            prop: 'packingStatusName'
          },
          {
            label: '生产日期',
            prop: 'vendorDate'
          },
          {
            label: '入库日期',
            prop: 'putawayDetailDate'
          },
          {
            label: '在库时间（天）',
            prop: 'putawayDate'
          }
        ]
      },
      infoData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.pallet_add, false),
        viewBtn: this.vaildData(this.permission.pallet_view, false),
        delBtn: this.vaildData(this.permission.pallet_delete, false),
        editBtn: this.vaildData(this.permission.pallet_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  methods: {
    beforeClose(done) {
      done();
    },
    beforeOpen(done, type) {
      if (['view'].includes(type)) {
        let prm = {
          areaId: this.form.areaId,
          partNo: this.form.partNo
        };
        getDetailTO(prm).then((res) => {
          let data = res.data.data;
          this.infoData = data || [];
        });
        done();
      }
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      // if (params.partCategory) {
      //   params.partCategoryId = params.partCategory;
      //   delete params.partCategory;
      // }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    startProgress(data, seconds = 500) {
      const time = seconds < 500 ? 500 : seconds;
      const setInterTime = time / 10;
      this.intervalId = setInterval(() => {
        if (this.currentProgress < 100) {
          this.currentProgress += 10;
        } else {
          clearInterval(this.intervalId);
          this.dialogVisible = false;
          this.data = data;
        }
      }, setInterTime);
    },
    async onLoad(page, params = {}) {
      this.currentProgress = 0;
      const startTime = new Date().getTime();
      let endTime;
      let data;
      // this.loading = true;
      this.dialogVisible = true;
      try {
        const res = await getListTo(page.currentPage, page.pageSize, Object.assign(params, this.query));
        data = res.data.data;
        this.page.total = data.total;
        this.selectionClear();
      } catch (e) {
        data = [];
      } finally {
        endTime = new Date().getTime();
        const seconds = endTime - startTime;
        this.startProgress(data.records || [], seconds);
      }
    },
    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scoped>
.infoCrud {
  ::v-deep .avue-crud__left {
    width: 100%;
  }
}

.btn-content {
  display: flex;
  justify-content: space-between;
  color: black;
  font-size: 16px;
}
</style>
